.otcOrder{
  margin-top: 20px;
  padding-top: 20px;
  .otcOrderTab{
    box-sizing: border-box;
    padding:0 20px 0 30px;
    span{
      position: relative;
      margin-right: 40px;
      line-height: 40px;
      font-size: 16px;
      padding-bottom: 8px;
      color: $font-color333;
    }
    .ingAnvert,
    .entrustAdvert{
      &::before{
        position: absolute;
        content: attr(text);
        right: -25px;
        top: -10px;
        width: 22px;
        height: 22px;
        font-size: 12px;
        line-height: 22px;
        text-align: center;
        color: $white-color;
        background: $tab-tip-num-bg;
        border-radius: 50%;
      }
    }
    span.activeTab{
      &::after{
        position: absolute;
        content: '';
        width: 30px;
        height: 2px;
        left: 50%;
        margin-left: -15px;
        bottom: 0;
        background: $div-border-bottom;
      }
    }
  }
  .otcOrderContent{
    position: relative;
    min-height: 140px;
    margin-top: 5px;
    padding: 0 20px;
    .commonTitle{
      display: flex;
      line-height: 40px;
      padding: 0 20px 0 10px;
      font-size: 12px;
      color: $explain-font-color;
      .commonTitleSpan:nth-child(1),
      .commonTitleSpan:nth-child(2),
      .commonTitleSpan:nth-child(2),
      .commonTitleSpan:nth-child(3),
      .commonTitleSpan:nth-child(4){
        flex: 1.5;
      }
      .commonTitleSpan:nth-child(5){
        flex: 1.33;
        text-indent: 20px;
      }
      .commonTitleSpan:nth-child(6){
        flex: 1.33;
        text-align: right;
      }
      .commonTitleSpan:nth-child(7){
        flex: 1.33;
        text-align: right;
      }
    }
    .blackListTitle{
      display: flex;
      line-height: 40px;
      font-size: 12px;
      color: $explain-font-color;
      text-align: center;
      border-bottom: 1px solid $border-blue-color;
      span{
        flex:1;
      }
    }
    .listLoadDiv{
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: $mask-bg-color;
      div{
        margin: auto;
      }
    }
    .advertList{
      li{
        position: relative;
        margin-bottom: 20px;
        transition: all .3s;
        overflow: hidden;
        box-shadow: $box-shadow-style1;
        border: 1px solid $border-blue-color;
        .ovderListInfo_time,
        .unfinishedListInfo_time,
        .completeListInfo_time,
        .notDoListInfo_time{
          line-height: 40px;
          padding: 0 20px 0 10px;
          box-sizing: border-box;
          color: $font-color333;
          background: $subheade-background-color;
          overflow: hidden;
          .createTime{
            margin-right: 20px;
          }
          .countTime{
            float: right;
            i{
              margin-right: 5px;
              font-size: 14px;
              color: $explain-font-color
              vertical-align: middle;
            }
            .minute,
            .second{
              font-size: 16px;
              color: $ad_side-sell-bg-color;
            }
          }
          .otherPersonInfo{
            float: right;
            line-height: 40px;
            .avatar{
              margin-right: 10px;
              img{
                width: 20px;
                height: 20px;
                vertical-align: middle;
                transform: translateY(-2px);
                border-radius: 50%;
              }
            }
            .icon{
              display: inline-block;
              width: 20px;
              height: 20px;
              i.icon-uniE90D{
                position: relative;
                font-size: 20px;
                width: 20px;
                height: 20px;
                color: $pro-price-color;
                &::before{
                  position: absolute;
                  top: 5px;
                }
              }
            }
            .nickName,
            .phoneNumber{
              color: $font-color333;
              font-size: 14px;
            }
            .nickName{
              margin-right: 20px
            }
          }
        }
        .ovderListInfo_detail,
        .unfinishedListInfo_detail,
        .completeListInfo_detail,
        .notDoListInfo_detail{
          padding: 0 20px 0 10px;
          display: flex;
          height: 60px;
          line-height: 60px;
          .detailItem{
            font-size: 14px;
            color: $font-color333;
            .ad_side{
              margin-right: 10px;
              padding: 2px;
              color: $white-color;
              border-radius: 1px;
            }
            .ad_side_buy{
              background: $ad_side-buy-bg-color;
            }
            .ad_side_sell{
              background: $ad_side-sell-bg-color;
            }
            .operation{
              padding: 3px 10px;
              border: 1px solid $border-blue-color;
              border-radius: 18px;
              color: $border-blue-color;
            }
            .unfinishedOper{
              transition: all .3s;
              color: $white-color;
              &:hover{
                transform: scale(1.1);
              }
            }
            .operationHover{
              border-color: $blue-font-hover;
              color: $blue-font-hover;
            }
            img{
              margin-right: 10px;
            }
            button{
              width: 80px;
              height: 30px;
              color: $white-color;
              border: none;
            }
          }
          .detailItem:nth-child(5){
            text-indent: 20px;
            img{
              vertical-align: middle;
              width: 24px;
              height: 24px;
            }
          }
          .detailItem:nth-child(1),
          .detailItem:nth-child(2),
          .detailItem:nth-child(3),
          .detailItem:nth-child(4){
            flex: 1.5
          }
          .detailItem:nth-child(5){
            flex: 1.33
          }
          .detailItem:nth-child(6),
          .detailItem:nth-child(7){
            flex: 1.33
            text-align: right;
          }
        }
      }
      .blackListInfo{
        margin: 0;
        border: none;
        text-align: center;
        box-shadow: none;
        .blackListInfo_detail{
          line-height: 40px;
          display: flex;
          .blackListInfo_item{
            flex: 1;
          }
          .remove{
            color:$explain-font-color;
          }
          .remove:hover{
            color: $blue-font-hover;
          }
        }
      }
      .blackListInfo:nth-of-type(2n){
        background: $subheade-background-color;
      }
    }
    .noDataShow{
      padding-top: 55px;
    }
  }
  .showQrcodeImg{
    width: 100%;
    height: 400px;
    .dialogImg{
      width: 100%;
      height: 100%;
    }
  }
  // 弹窗
  .dialog-bodys{
    // 关闭广告
    .dialog-contents{
      text-align: center;
      .closeAdvertTitle{
        color: $font-color333;
      }
      .prompt{
        .titles{
          line-height: 72px;
          color: $font-color333;
          font-size: 24px;
        }
      }
    }
  }
}
